<template>
  <div class="my-login">
    <div class="top" id="top-box">
      <div class="box-code">
        <div class="to-ava" id="tou">
          <!--      放张头像-->
          <div class="top-ava-ce">
            <a-avatar :size="128" :src="aveterUrl">
            </a-avatar>
          </div>
        </div>
        <hr>
        <div class="login-title">
          <h2>Sign Up</h2>
        </div>
        <div>
          <a-form
              :rules="rules"
              :model="formState"
              name="normal_login"
              class="login-form"
              @finish="onFinish"
              @finishFailed="onFinishFailed">
            <a-form-item
                label="账号"
                name="username">
              <a-input v-model:value="formState.username" placeholder="手机号码/邮箱/账号">
                <template #prefix>
                  <UserOutlined class="site-form-item-icon"/>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item
                label="密码"
                name="password">
              <a-input-password class="input-password" v-model:value="formState.password">
                <template #prefix>
                  <LockOutlined class="site-form-item-icon"/>
                </template>
              </a-input-password>
            </a-form-item>
            <a-form-item class="button-l-r">
              <a-button class="login-button" type="primary" @click="login">登录</a-button>
              <a-button class="register-button" type="ghost" @click="register">注册</a-button>
            </a-form-item>
          </a-form>
          <div class="login-form-wrap">
            <div class="butt-qq">
              <a>
                <icon :style="{ fontSize: '25px' }" style="vertical-align: text-bottom">
                  <template #component="svgProps">
                    <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" v-bind="svgProps">
                      <path
                          d="M68.399765 590.615655c-37.073602 90.765025-43.465533 176.418105-14.062849 191.757941 20.45478 11.505876 53.692423-14.061849 84.374094-60.084355 11.504876 51.135451 42.186547 95.87897 84.373094 132.952572-44.743519 16.619821-74.146204 44.743519-74.146204 75.42519 0 51.135451 79.259149 93.321998 176.418105 93.321997 88.208052 0 161.07627-33.237643 175.138119-77.982162h20.45478C535.009753 990.751357 607.87897 1023.989 696.087023 1023.989c98.436943 0 176.418105-40.908561 176.418104-93.321997 0-30.68167-29.402684-58.806368-74.146203-75.42519 42.186547-37.073602 72.868217-81.817121 84.374094-132.952572 30.68067 46.022506 62.640327 71.589231 84.373093 60.084355 30.68167-15.339835 24.289739-102.270901-14.061849-191.757941-29.403684-70.311245-69.033258-122.725682-99.714929-134.230558 0-3.835959 1.278986-8.949904 1.278987-14.062849 0-26.845712-7.669918-52.413437-20.454781-72.868217v-5.112945c0-12.783863-2.555973-24.289739-7.669917-34.516629C818.813704 145.736434 701.200968 0 510.722014 0 320.24206 0 202.630323 145.736434 194.959406 329.824457c-5.112945 10.22689-7.669918 21.732767-7.669918 34.516629v5.112945c-12.783863 20.45478-20.45478 46.022506-20.45478 72.869217v14.061849c-28.123698 11.504876-69.032258 62.640327-98.434943 134.230558z"
                          fill="#4CAFE9" p-id="2010"></path>
                    </svg>
                  </template>
                </icon>
                QQ</a>
              <span class="erweima">
                <icon :style="{fontSize: '25px'}" style="vertical-align: text-bottom">
                  <template #component="svgProps2">
                    <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" v-bind="svgProps2"><path
                        d="M433.282171 47.939849 94.944396 47.939849c-23.327288 0-42.304502 18.975167-42.304502 42.300408l0 338.341868c0 23.324218 18.977213 42.300408 42.304502 42.300408L433.282171 470.882534c23.324218 0 42.300408-18.97619 42.300408-42.300408L475.582579 90.240257C475.581556 66.915016 456.606389 47.939849 433.282171 47.939849zM438.742533 428.582125c0 3.01159-2.449795 5.461385-5.461385 5.461385L94.944396 434.04351c-3.013637 0-5.465478-2.450818-5.465478-5.461385L89.478917 90.240257c0-3.01159 2.451842-5.461385 5.465478-5.461385L433.282171 84.778872c3.01159 0 5.461385 2.449795 5.461385 5.461385L438.743556 428.582125z"
                        p-id="2827"></path><path
                        d="M322.914504 173.887352l-117.608581 0c-14.733563 0-26.719548 11.985986-26.719548 26.719548l0 117.608581c0 14.735609 11.985986 26.724665 26.719548 26.724665l117.608581 0c14.735609 0 26.724665-11.989055 26.724665-26.724665l0-117.608581C349.640192 185.873338 337.651137 173.887352 322.914504 173.887352zM312.801169 308.101123l-97.374748 0 0-97.374748 97.374748 0L312.801169 308.101123z"
                        p-id="2828"></path><path
                        d="M322.914504 675.606195l-117.608581 0c-14.733563 0-26.719548 11.989055-26.719548 26.724665l0 117.608581c0 14.732539 11.985986 26.719548 26.719548 26.719548l117.608581 0c14.735609 0 26.724665-11.987009 26.724665-26.719548l0-117.608581C349.640192 687.59525 337.651137 675.606195 322.914504 675.606195zM312.801169 809.819966l-97.374748 0 0-97.374748 97.374748 0L312.801169 809.819966z"
                        p-id="2829"></path><path
                        d="M699.123818 344.940147l117.608581 0c14.735609 0 26.724665-11.989055 26.724665-26.724665l0-117.608581c0-14.733563-11.989055-26.719548-26.724665-26.719548l-117.608581 0c-14.732539 0-26.719548 11.985986-26.719548 26.719548l0 117.608581C672.40427 332.951091 684.391279 344.940147 699.123818 344.940147zM709.243293 210.726376l97.374748 0 0 97.374748-97.374748 0L709.243293 210.726376z"
                        p-id="2830"></path><path
                        d="M433.282171 546.435277 94.944396 546.435277c-23.327288 0-42.304502 18.97619-42.304502 42.300408L52.639894 927.077553c0 23.325241 18.977213 42.301432 42.304502 42.301432L433.282171 969.378985c23.324218 0 42.300408-18.97619 42.300408-42.301432L475.582579 588.735685C475.581556 565.411467 456.606389 546.435277 433.282171 546.435277zM438.742533 927.077553c0 3.01159-2.449795 5.462408-5.461385 5.462408L94.944396 932.539962c-3.013637 0-5.465478-2.450818-5.465478-5.462408L89.478917 588.735685c0-3.010567 2.451842-5.461385 5.465478-5.461385L433.282171 583.2743c3.01159 0 5.461385 2.450818 5.461385 5.461385L438.743556 927.077553z"
                        p-id="2831"></path><path
                        d="M590.849836 547.776831c-23.325241 0-42.301432 18.978237-42.301432 42.305525l0 194.649212c0 10.172687 8.246825 18.419512 18.419512 18.419512s18.419512-8.246825 18.419512-18.419512L585.387427 590.082356c0-3.013637 2.450818-5.466502 5.462408-5.466502l204.825992 0c10.172687 0 18.419512-8.246825 18.419512-18.419512s-8.246825-18.419512-18.419512-18.419512L590.849836 547.776831z"
                        p-id="2832"></path><path
                        d="M588.757175 470.882534l338.341868 0c23.325241 0 42.301432-18.97619 42.301432-42.300408L969.400474 90.240257c0-23.324218-18.97619-42.300408-42.301432-42.300408L588.757175 47.939849c-23.324218 0-42.300408 18.975167-42.300408 42.300408l0 338.341868C546.456766 451.906343 565.432956 470.882534 588.757175 470.882534zM583.295789 90.240257c0-3.01159 2.450818-5.461385 5.461385-5.461385l338.341868 0c3.01159 0 5.462408 2.449795 5.462408 5.461385l0 338.341868c0 3.01159-2.450818 5.461385-5.462408 5.461385L588.757175 434.04351c-3.010567 0-5.461385-2.450818-5.461385-5.461385L583.295789 90.240257z"
                        p-id="2833"></path><path
                        d="M969.676767 566.196343c0-10.172687-8.246825-18.419512-18.419512-18.419512l-67.50444 0c-10.172687 0-18.419512 8.246825-18.419512 18.419512s8.246825 18.419512 18.419512 18.419512l49.084928 0 0 71.009264L779.708158 655.625118c-10.172687 0-18.419512 8.246825-18.419512 18.419512s8.246825 18.419512 18.419512 18.419512l171.549098 0c10.172687 0 18.419512-8.246825 18.419512-18.419512 0-0.076748-0.010233-0.151449-0.011256-0.228197 0.001023-0.076748 0.011256-0.150426 0.011256-0.228197L969.676767 566.196343z"
                        p-id="2834"></path><path
                        d="M630.202099 933.142689l-44.813648 0 0-51.2922c0-10.172687-8.246825-18.419512-18.419512-18.419512s-18.419512 8.246825-18.419512 18.419512l0 69.711711c0 10.172687 8.246825 18.419512 18.419512 18.419512l63.23316 0c10.172687 0 18.419512-8.246825 18.419512-18.419512S640.374786 933.142689 630.202099 933.142689z"
                        p-id="2835"></path><path
                        d="M834.04981 790.359752c0-10.172687-8.246825-18.419512-18.419512-18.419512L699.257871 771.940241c-10.172687 0-18.419512 8.246825-18.419512 18.419512l0 163.013701c0 10.172687 8.246825 18.419512 18.419512 18.419512s18.419512-8.246825 18.419512-18.419512L717.677383 808.779264 815.630299 808.779264C825.802986 808.779264 834.04981 800.532439 834.04981 790.359752z"
                        p-id="2836"></path><path
                        d="M951.060781 723.425294c-10.172687 0-18.419512 8.246825-18.419512 18.419512l0 194.301288L765.943666 936.146093c-10.172687 0-18.419512 8.246825-18.419512 18.419512s8.246825 18.419512 18.419512 18.419512l185.117115 0c10.172687 0 18.419512-8.246825 18.419512-18.419512L969.480292 741.844805C969.480292 731.672118 961.234491 723.425294 951.060781 723.425294z"
                        p-id="2837"></path><path
                        d="M655.979182 623.620194c-10.172687 0-18.419512 8.246825-18.419512 18.419512l0 59.869552c0 10.172687 8.246825 18.419512 18.419512 18.419512s18.419512-8.246825 18.419512-18.419512l0-59.869552C674.398694 631.867018 666.151869 623.620194 655.979182 623.620194z"
                        p-id="2838"></path></svg>
                  </template>
                </icon>
                <a href="">扫码</a>
              </span>
            </div>
            <a class="login-form-forgot" href="">忘记密码?</a>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="div1">
        <h3>版权归作者所有,侵权必究</h3>
      </div>
    </div>
  </div>
</template>
<script>
import {createSocket, sendWSPush, setUserMessage} from "@/api/webSocket/webSoket";
import {defineComponent, reactive, computed, ref, createVNode} from 'vue';
import Icon, {UserOutlined, LockOutlined, ExclamationCircleOutlined} from '@ant-design/icons-vue';
import {message, Modal} from 'ant-design-vue';

const {confirmModal} = require("@/components/Ant-design-comm");
import {useStore} from 'vuex'
import {constant} from "@/api/constant/constant";

const store = useStore()
export default defineComponent({
  components: {
    Icon,
    message,
    UserOutlined,
    LockOutlined,
  },
  created() {
    if (this.$route.params.msg != null) {
      confirmModal(this.$route.params.msg)
      this.$route.params.mag = null
    }
  },
  beforeCreate() {
    this.$nextTick(() => {
      document.body.setAttribute('style', '  background: url("http://localhost:8080/images/indexbg.jpg");\n' +
          '  background-size: 100% 100%;\n' +
          '  height: 100%;\n' +
          '  position: fixed;\n' +
          '  width: 100%')
    })
  },
  beforeRouteLeave() {
    document.body.setAttribute('style', '')
  },
  methods: {
    //注册这个东西 自己在个人中心进行完善  我们这里只需要进行一波账号密码的注册就行了
    register() {
      this.$router.push("/register")
    },
    //需要拿着token去绑定的  就是说我这个token会一直存在服务器
    doWebSocket() {
      //创建这个websocket  发请求至后台 存下当前账号
      setUserMessage(this.formState.username)
      createSocket(`${constant.websocketUrlPrefix}${this.formState.username}`)
      this.$router.push("/")
    },
    doModel(res) {
      let _this = this
      Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: res.data.msg,
        okText: '继续登录',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          //代码走到这里 一定是有人登录了  并且当前用户强制登录 则发请求去后台
          _this.$store.dispatch('setToken', res.data.token, res.data.expire)
          _this.$store.dispatch('setUser', res.data.user)
          _this.$localStorage.set("token", res.data.token, res.data.expire)
          _this.doWebSocket()
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    },
    login() {
      message.loading('登录中...', 0.5)
          .then(() => {
            if (this.formState.username === '' || this.formState.password === '') {
              message.error('账号密码不能为空', 2.5)
            } else {
              this.$httpPost('/user/login', this.formState).then((res) => {
                this.$localStorage.clear()
                if (res.data.code === 0) {
                  //登录成功 保存token
                  message.success("登录成功", 2.5)
                  this.$store.dispatch('setToken', res.data.token, res.data.expire)
                  this.$store.dispatch('setUser', res.data.user)
                  this.$localStorage.set("token", res.data.token, res.data.expire)
                  //  建立socket连接 同时 监听是否会有其他人进性异地登录 一旦发现 进行退出 所以说我们写个websocket.js文件
                  this.doWebSocket()
                } else if (res.data.code === 10001) {
                  message.error(res.data.msg, 2)
                } else if (res.data.code === 10002) {
                  message.error(res.data.msg, 2)
                } else if (res.data.code === 10003) {
                  message.error(res.data.msg, 2)
                } else {
                  this.doModel(res)
                }
              })
            }
          });
    }
  },
  data() {
    let checkUserName = async (_rule, value) => {
      if (!value) {
        return Promise.reject('请输入你的账号!');
      }
      if (value.length < 0 || value.length > 20) {
        return Promise.reject('长度不能小于0或者不能大于20!');
      }
      if (value) {
        this.$httpPost('/user/getAvaByName?username=' + this.formState.username, '').then((res) => {
          if (res.data.code === 0) {
            this.aveterUrl = res.data.url
            return Promise.resolve();
          } else {
            this.aveterUrl = "http://localhost:8080/test/nvw.jpg"
          }
        })
      }
    };
    let checkPass = (_rule, value) => {
      if (value === '') {
        return Promise.reject('Please input the password');
      } else {
        if (this.formState.password !== '') {
          return Promise.resolve();
        }
      }
    };
    return {
      loginVisible: false,
      rules: {
        username: [{
          required: true,
          validator: checkUserName,
          trigger: 'blur',
        }],
        password: [{
          required: true,
          validator: checkPass,
          trigger: 'blur',
        }],
      }
    }
  }
  ,
  setup() {
    const aveterUrl = ref('http://localhost:8080/test/nvw.jpg')
    const formState = reactive({
      username: '',
      password: '',
    });


    const onFinish = values => {
      console.log('Success:', values);
    };
    const onFinishFailed = errorInfo => {
      console.log('Failed:', errorInfo);
    };

    const disabled = computed(() => {
      return !(formState.username && formState.password);
    });
    return {
      aveterUrl,
      formState,
      onFinish,
      onFinishFailed,
      disabled,
    };
  }
  ,
})
;
</script>
<style scoped lang="scss">
.top-ava-ce {
  margin: 0 auto;
  width: 128px;
  height: 128px
}

.div1 {
  width: 100%;
  height: 200px;
  animation: div1m 1s infinite;
}

@keyframes div1m {
  from {
    border-radius: 50%;
    background-color: cornflowerblue;
  }

}

.div1 h3 {
  margin-top: 10px;
  text-align: center;
}

.ant-input-affix-wrapper {
  height: 40px;
  border-radius: 10px;
}

.button-l-r {
  width: 230px;
  margin: 0 auto;
}

.login-button {
  width: 100px;
  margin: 15px 15px 0 0;
  border-radius: 10px;
}

.register-button {
  width: 100px;
  margin: 15px 0 0 15px;
  border-radius: 10px;
}

.login-form-forgot:hover {
  text-decoration: underline;
}

.box-code {
  margin-top: 6em;
  border-radius: 2em;
  width: 480px;
  height: 600px;
  background: white;
}

.top {
  display: flex;
  justify-content: center;
}

a {
  text-decoration: none; /* 去除默认的下划线 */
  outline: none; /* 去除旧版浏览器的点击后的外虚线框 */
  color: #000; /* 去除默认的颜色和点击后变化的颜色 */
}

.login-title {
  width: 100%;
  height: 60px;
  font-size: 20px;
  font-weight: bold;
}

.login-title h2 {
  text-align: center;
  line-height: 60px;
}

* {
  padding: 0;
  margin: 0;
}

.erweima {
  margin-left: 20px;
}

.login-form-wrap {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#tou {
  background-color: #00ccff;
}

@keyframes mymove {
  from {
    border-radius: 50%;
    background-color: #00ccff;
  }
}

/*Safari 和 Chrome:*/
@-webkit-keyframes mymove {
  from {
    border-radius: 50%;
    background-color: #00ccff;
  }
}

.to-ava {
}
</style>
